<template>
  <div class="infor-box2" v-if="activeTab == 0 || activeTab == 3">
    <div class="l-name">
      {{ infoData.name }}
    </div>
    <div class="basic-title">
      <div class="basic-item">
        <div class="basic-item-left">占地面积：{{ baseInfoData.zdmj || "--" }}万m²</div>
      </div>
      <div class="basic-item">
        <div class="basic-item-left">上市日期：{{ baseInfoData.ssrq || "--" }}</div>
      </div>
      <div class="basic-item">
        <div class="basic-item-left">楼栋数：{{ baseInfoData.lds || "--" }}</div>
      </div>
      <div class="basic-item">
        <div class="basic-map-box">预售：{{ baseInfoData.ysts || "--" }}套</div>
        <div class="basic-map-box">已售：{{ baseInfoData.ysfwts || "--" }}套</div>
      </div>
      <div class="basic-item">
        <div class="basic-map-box">待售：{{ baseInfoData.dsts || "--" }}套</div>
        <div class="basic-map-box">二手房：{{ baseInfoData.esfts || "--" }}套</div>
      </div>
    </div>
  </div>
  <div
    :class="activeTab == 0 || activeTab == 3 ? 'infor-box infor-box1' : 'infor-box'"
    v-loading="loading"
    element-loading-text="加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)"
  >
    <div class="infor-tab">
      <div v-for="(item, index) in tabList" :key="index" @click="tabChange(index, 1)" :class="{ 'active-tab': activeTab == index }">
        <span class="tab-item">{{ item }}</span>
      </div>
      <div v-if="activeTab == 3" style="margin-left: 24px" @click="submitForm(ruleFormRef)">查询</div>
      <img src="@/assets/img/gisPage/off.png" alt="" @click="inforOff" />
    </div>
    <!-- 基本信息 -->
    <div v-if="activeTab == 0" class="jb-infor">
      <div class="infor-basic">
        <div class="basic-one basic-box">
          <p class="title">交易信息</p>
          <p>价格范围：{{ baseInfoData.lds || "--" }}</p>
          <p>保值情况：{{ baseInfoData.lhl || "--" }}</p>
          <p>保值预测：{{ baseInfoData.ysts || "--" }}</p>
        </div>
      </div>
      <div class="infor-basic">
        <div class="basic-one basic-box">
          <p class="title">生活信息</p>
          <p>绿化率：{{ baseInfoData.lhl || "--" }}</p>
          <p>容积率：{{ baseInfoData.ysts || "--" }}</p>
          <p>车位数量：{{ baseInfoData.tcw || "--" }}</p>
        </div>
      </div>
      <div class="infor-basic">
        <div class="basic-one basic-box">
          <p class="title">物业及开发商</p>
          <p>物业：{{ baseInfoData.wygs || "--" }}</p>
          <p>开发商：{{ baseInfoData.kfs || "--" }}</p>
        </div>
      </div>
    </div>
    <!-- 成交信息 -->
    <div class="infor-transaction" v-if="activeTab == 1">
      <div class="charts-money">
        <div class="charts-title">
          <div class="charts-title-bg">价格走势</div>
          <div class="charts-title-tab">
            <p
              @click="tabChange(index, 2)"
              :class="{ 'charts-title-tab-active': index == chartsOne }"
              v-for="(item, index) in chartsList"
              :key="index"
            >
              {{ item }}
            </p>
          </div>
        </div>
        <div class="charts-content" @click="fullSc('barLinePbulic', priceTrendData)">
          <bar-line-pbulic
            ref="priceTrendDomRef"
            style="width: 100%"
            class="h150"
            :type="1"
            v-if="Object.keys(priceTrendData).length > 0"
            :housingSupplyStatsData="priceTrendData"
          ></bar-line-pbulic>
        </div>
      </div>
      <div class="charts-money">
        <div class="charts-title">
          <div class="charts-title-bg">成交走势</div>
          <div class="charts-title-tab">
            <p
              @click="tabChange(index, 3)"
              :class="{ 'charts-title-tab-active': index == chartsTwo }"
              v-for="(item, index) in chartsList"
              :key="index"
            >
              {{ item }}
            </p>
          </div>
        </div>
        <div class="charts-content" @click="fullSc('barLinePbulic', tradeTrendData)">
          <bar-line-pbulic
            ref="tradeTrendDomRef"
            style="width: 100%"
            class="h150"
            :type="1"
            v-if="Object.keys(tradeTrendData).length > 0"
            :housingSupplyStatsData="tradeTrendData"
          ></bar-line-pbulic>
        </div>
      </div>
    </div>
    <!-- 周边设施 -->
    <div class="infor-facilities" v-if="activeTab == 2">
      <div class="department-tab-one">
        <p
          @click="tabChange(index, 4)"
          :class="{ 'department-tab-one-active': facilitiesListTab == index }"
          v-for="(item, index) in facilitiesList"
          :key="index"
        >
          {{ item }}
        </p>
      </div>
      <!-- 暂时隐藏-->
      <div v-if="false" class="department-tab-two">
        <p
          @click="tabChange(index, 5)"
          :class="{ 'department-tab-two-active': facilitiesListTwoTab == index }"
          v-for="(item, index) in facilitiesListTwo"
          :key="index"
        >
          {{ item }}
        </p>
      </div>
      <div v-show="surroundingFacilityList?.length" class="department-tab-list">
        <div class="facilities-item" @click="qyCard(item)" v-for="(item, index) in surroundingFacilityList" :key="index">
          <div class="facilities-item-top">
            <div style="display: flex; align-items: center">
              <div class="facilities-item-top-l">
                <p class="num">{{ index + 1 }}</p>
                <p class="name">{{ item.name }}</p>
              </div>
              <p class="facilities-item-bottom">{{ item.address }}</p>
            </div>
            <p class="distance">距离：{{ Math.floor(item.realInstance) }}米</p>
          </div>
        </div>
      </div>
      <el-empty class="surrounding-facility-empty" v-show="!surroundingFacilityList?.length" :image-size="0" description="暂无周边设施" />
    </div>
    <!-- 楼盘信息 -->
    <div v-if="activeTab == 3" style="margin-top: 30px">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
        <el-form-item label="楼栋" prop="ldName">
          <el-select @change="dyNameChange" v-model="ruleForm.ldName" placeholder="请选择楼栋" popper-class="infor-pg-custom-cascader" clearable>
            <el-option v-for="item of ruleForm.ldList" :label="item.label" :value="item.value" class="custom-select-option" />
          </el-select>
        </el-form-item>
        <el-form-item label="单元" prop="dyName">
          <el-select v-model="ruleForm.dyName" placeholder="请选择楼栋" popper-class="infor-pg-custom-cascader" clearable>
            <el-option v-for="item of ruleForm.dyList" :label="item.label" :value="item.value" class="custom-select-option" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <!-- vr看房 -->
    <div v-if="activeTab == 4">
      <div class="vr-box flex jsb" v-if="vrData">
        <div class="vr-box-img" v-for="(item, index) in vrData" :key="index" @click="setVaUrl(item.vrUrl, item.vrQsUrl)">
          <img :src="item.hxtUrl" alt="" />
          <div>{{ item.hxjs }}</div>
        </div>
      </div>
    </div>
  </div>

  <!-- table -->
  <div class="table-sty" v-if="pgListShow">
    <div class="infor-lp-off" @click="pgListOff">关闭</div>
    <div class="table-sty-box">
      <table>
        <tbody>
          <tr v-for="(item, index) in pgListData" :key="index">
            <td style="width: 113px">{{ item.lc }}楼</td>
            <td style="width: 240px" v-for="(item1, index1) in item.buildInfoList" :key="index1">
              <span class="num">{{ item1.lcfh }}</span>
              <span class="status" :style="{ background: getBackgroundColor(item1.zt) }">{{ item1.zt == null ? "未售" : item1.zt }}</span>
              <span class="status1" @click="pgFun(item.lc, item1)" v-if="item1.zt == '已售' && (!item1.show || item1.show == 2)">评估</span>
              <span class="status1" @click="pgOffFun(item.lc, item1)" v-if="item1.zt == '已售' && item1.show && item1.show == 1">关闭</span>
              <div class="content-infor" style="margin-top: -10px" v-if="!item1.show || item1.show == 2">
                <p>建筑面积：{{ item1.jzmj ? item1.jzmj : 0 }}m²</p>
                <p>户型：{{ item1.hx ? item1.hx : "0居室" }}</p>
              </div>
              <div class="content-infor" style="margin-top: -10px" v-if="item1.show && item1.show == 1">
                <p>预估单价：￥{{ item1.ygdj }}/m²</p>
                <p>预估总价：{{ item1.ygzj }}万</p>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <el-dialog
    custom-class="magnify-dialig"
    v-model="magnifyData.dialogVisible"
    :width="magnifyData.dialogWidth"
    :top="magnifyData.dialogTop"
    :append-to-body="true"
  >
    <component
      v-if="magnifyData.dialogVisible"
      ref="dialogRef"
      :is="magnifyData.componentName"
      :dialogData="{
        fontSizeTimes: 2,
      }"
      v-bind="{ ...magnifyData.props }"
    ></component>
  </el-dialog>
</template>
<script lang="ts">
import barLinePbulic from "@/components/gisPage/barLinePbulic.vue";
export default {
  components: { barLinePbulic },
};
</script>
<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, nextTick, onBeforeUnmount, defineEmits } from "vue";
import { barLineParamsData } from "@/utils/chartsPbulic";
import { selectProjectInfo, getLdSelect, getdySelect, selectBuildInfo, buildEvaluationItem, getHxt } from "@/api/gisHouseAnalysAlert";
import busEmitter from "@/utils/bus";
const priceTrendData = ref({}); // 成交信息-价格走势-折线图data
const priceTrendDomRef: any = ref(null); // 成交信息-价格走势-domref
const tradeTrendData = ref({}); // 成交信息-成交走势-折线图data
const tradeTrendDomRef: any = ref(null); // 成交信息-成交走势-domref
const emits = defineEmits(["inforOffla"]);
const tabList = reactive(["基本信息", "成交信息", "周边设施", "楼盘信息", "VR看房"]);
const chartsList = reactive(["按月", "按年"]);
const facilitiesList = reactive(["教育", "交通", "医疗", "银行", "商业"]);
const facilitiesListTwo = reactive(["幼儿园", "小学", "中学", "大学"]);
const activeTab = ref(0);
const chartsOne = ref(0);
const chartsTwo = ref(0);
const facilitiesListTab = ref(0);
const facilitiesListTwoTab = ref(0);
const infoData: any = ref({});
const baseInfoData: any = ref({}); // 基本信息
const surroundingFacilityList: any = ref([]); // 周边设施list
const loading = ref(false); // 周边设施list
const pgListData = ref([]); // 楼盘信息
const pgListShow = ref(false); // 楼盘信息
const ruleForm = reactive<any>({
  ldName: "",
  dyName: "",
  ldList: [],
  dyList: [],
});
const ruleFormRef = ref(null);
const rules = reactive({
  ldName: [
    {
      required: true,
      trigger: ["change"],
      message: "请选择楼栋",
    },
  ],
  dyName: [
    {
      required: true,
      trigger: ["change"],
      message: "请选择单元",
    },
  ],
});

const magnifyData = ref({
  // chart图放大data
  dialogVisible: false,
  componentName: "",
  componentParams: {},
  dialogWidth: "",
  props: {},
  dialogTop: "",
});

const inforOff = () => {
  emits("inforOffla");
  pgListShow.value = false;
  busEmitter.emit("inforFun", 2);
};
const vrData = ref<any>(null);
const tabChange = (index: any, num: any) => {
  // num 1顶部切换  2成交信息价格走势切换  3成交信息成交走势切换  4周边设施切换1  5周边设施切换2
  if (num == 1) {
    activeTab.value = index;
    getInfo();
  } else if (num == 2) {
    // 成交信息-line1
    chartsOne.value = index;
    getInfo("chartOne");
  } else if (num == 3) {
    // 成交信息-line2
    chartsTwo.value = index;
    getInfo("chartTwo");
  } else if (num == 4) {
    // 周边设施-顶部tab1
    facilitiesListTab.value = index;
    getInfo();
  }
};
//vr看房
const getVrImg = async () => {
  let { data } = await getHxt({ projectName: infoData.value.name });
  vrData.value = data;
};
const setVaUrl = (url: string, qsUrl: string) => {
  busEmitter.emit("setVrUrl", {
    url,
    qsUrl,
  });
};
// 获取租赁市场供需走势
const priceTrend = async (priceData: any, tradeData: any, whichChart: string) => {
  let legendStyle = {
    show: false,
    icon: "",
    left: 0,
    top: 0,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 18,
  };
  let gridConfig = {
    left: "0%",
    right: "5%",
    bottom: "15%",
    top: "20%",
  };
  if (!whichChart || whichChart === "chartOne") {
    // 价格走势
    let priceParamsData = barLineParamsData(
      [],
      priceData.xAxis,
      [
        {
          name: "单位：套",
          type: "1",
        },
      ],
      [
        {
          name: "line",
          type: "1",
          areaStyleType: "2",
          stack: "1",
        },
      ],
      [priceData.gj],
      [
        {
          a: "rgba(0, 43, 79, 1)",
          b: "rgba(0, 43, 79, 0)",
        },
      ],
      legendStyle,
      gridConfig
    );
    priceTrendData.value = priceParamsData;
    if (whichChart === "chartOne") {
      if (priceTrendDomRef.value) {
        nextTick(() => {
          priceTrendDomRef.value.updateChart();
        });
      }
    }
  }
  if (!whichChart || whichChart === "chartTwo") {
    // 成交走势
    let tradeParamsData = barLineParamsData(
      [],
      tradeData.xAxis,
      [
        {
          name: "单位：套",
          type: "1",
        },
      ],
      [
        {
          name: "line",
          type: "1",
          areaStyleType: "2",
          stack: "1",
        },
      ],
      [tradeData.gj],
      [
        {
          a: "rgba(0, 43, 79, 1)",
          b: "rgba(0, 43, 79, 0)",
        },
      ],
      legendStyle,
      gridConfig
    );
    tradeTrendData.value = tradeParamsData;
    if (whichChart === "chartTwo") {
      if (tradeTrendDomRef.value) {
        nextTick(() => {
          tradeTrendDomRef.value.updateChart();
        });
      }
    }
  }
};
// 查单元
const dyNameChange = async (val) => {
  ruleForm.dyName = "";
  let { data } = await getdySelect({
    projectName: infoData.value.name,
    ldName: val,
    dyName: "",
  });
  ruleForm.dyList = data;
};
// 查楼栋
const ldNameChange = async (val) => {
  let { data } = await getLdSelect({
    projectName: infoData.value.name,
  });
  ruleForm.ldList = data;
};
// 查列表
const pgList = async (val) => {
  let { data } = await selectBuildInfo({
    projectName: infoData.value.name,
    ldName: ruleForm.ldName,
    dyName: ruleForm.dyName,
  });
  pgListData.value = data;
  if (pgListData.value.length > 0) {
    pgListShow.value = true;
  }
};

// 关闭列表
const pgListOff = () => {
  pgListShow.value = false;
};
// 查询
const search = () => {
  if (activeTab.value + 1 === 4) {
    pgList();
    pgListShow.value = true;
  }
};
// 点击查询
const submitForm = async (formEl) => {
  // 点击评估按钮
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!", ruleForm);
      pgList();
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 点击区域
const qyCard = (item) => {
  busEmitter.emit("inforFun", item);
};

// 状态颜色
const getBackgroundColor = (name) => {
  if (name == "已售") {
    return "#DA6060";
  } else if (name == "查封") {
    return "#9B9B9B";
  } else if (name == "认购") {
    return "#607CDA";
  } else if (name == "抵押") {
    return "#DA9860";
  } else {
    return "#60B3DA";
  }
};

const pgFun = async (myc, item1) => {
  let queryParams = {
    projectName: infoData.value.name,
    ldName: item1.ldName,
    dyName: item1.dyName,
    myc,
    fh: item1.fh,
  };
  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)",
    customClass: "loading-class",
  });
  let { data } = await buildEvaluationItem(queryParams);
  pgListData.value.forEach((item) => {
    let matchedItem = item.buildInfoList.find((obj) => obj.lcfh === item1.lcfh);
    if (matchedItem) {
      matchedItem.ygdj = data.ygdj;
      matchedItem.ygzj = data.ygzj;
      matchedItem.show = 1;
    }
  });
  loading.close();
};

const pgOffFun = async (myc, item1) => {
  pgListData.value.forEach((item) => {
    let matchedItem = item.buildInfoList.find((obj) => obj.lcfh === item1.lcfh);
    if (matchedItem) {
      matchedItem.show = 2;
    }
  });
};

const getInfo = (whichChart: string = "") => {
  if (4 == activeTab.value + 1) {
    busEmitter.emit("inforFun", 1);
    ruleForm.ldName = "";
    ruleForm.dyName = "";
    ldNameChange();
    return;
  }
  if (3 != activeTab.value + 1) {
    busEmitter.emit("inforFun", 1);
  }
  // vr
  if (5 == activeTab.value + 1) {
    getVrImg();
    busEmitter.emit("inforFun", 1);
    return;
  }
  pgListOff();
  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)",
    customClass: "loading-class",
  });
  selectProjectInfo({
    xmmc: infoData.value.name, // 项目名称
    // xmmc: "滑翔西社区", // 项目名称
    classType: activeTab.value + 1, // 分类type
    priceDateType: activeTab.value + 1 === 2 ? (chartsOne.value === 0 ? 1 : 2) : undefined, // 价格走势-时间type
    tradingDateType: activeTab.value + 1 === 2 ? (chartsTwo.value === 0 ? 1 : 2) : undefined, // 成交走势-时间type
    zbType: activeTab.value + 1 === 3 ? facilitiesListTab.value + 1 : undefined, // 周边设施
  })
    .then((res) => {
      loading.close();
      if (activeTab.value + 1 === 2) {
        // 成交信息
        const tradeInfo = res?.data?.resultMap;
        if (Object.keys(tradeInfo)?.length) {
          const priceData = {
            xAxis: tradeInfo?.priceTimeList || [],
            gj: tradeInfo?.priceList || [],
          };
          const tradeData = {
            xAxis: tradeInfo?.tradingTimeList || [],
            gj: tradeInfo?.tradingList || [],
          };
          priceTrend(priceData, tradeData, whichChart);
        }
      } else if (activeTab.value + 1 === 3) {
        // 周边设施
        const surroundingFacility = res?.data?.zbList;
        surroundingFacilityList.value = [];
        if (surroundingFacility?.length) {
          surroundingFacilityList.value = surroundingFacility;
        }
      } else {
        const tempDetail = res?.data?.detailsBasicsInfo;
        if (Object.keys(tempDetail)?.length) {
          baseInfoData.value = tempDetail;
        }
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

const fullSc = (componentName, componentParams) => {
  // 放大chart图
  magnifyData.value.dialogTop = "25vh";
  magnifyData.value.dialogVisible = true;
  magnifyData.value.componentName = componentName;
  switch (componentName) {
    case "barLinePbulic": // 单折线图
      magnifyData.value.props = {
        housingSupplyStatsData: componentParams,
        class: "h150 dialog-h150",
      };
      magnifyData.value.dialogWidth = "60%";
      magnifyData.value.dialogTop = "20vh";
      break;
  }
};

onMounted(() => {
  nextTick(() => {
    busEmitter.on("getDetail", (res) => {
      infoData.value = res;
      getInfo();
    });
  });
});
onBeforeUnmount(() => {
  busEmitter.off("getDetail"); // 销毁bus总线
});
</script>

<style scoped lang="less">
.mt15 {
  margin-top: 15px;
}

.basic-title {
  margin-bottom: 20px;

  .basic-item {
    margin: 5px 0px;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;

    &-left,
    &-right {
      flex: 1;
    }

    .basic-map {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}

.infor-box {
  width: 579px;
  height: 235px;
  background: linear-gradient(180deg, rgba(71, 121, 185, 0.85) 0%, rgba(10, 65, 118, 0.6) 100%);
  position: fixed;
  bottom: 20px;
  left: 654px;
  padding: 20px 30px 20px 34px;
  z-index: 1001;

  .infor-tab {
    display: flex;
    font-size: 24px;
    color: #fff;
    margin-bottom: 12px;
    cursor: pointer;
    position: relative;

    .line {
      padding: 0 10px 0 5px;
    }

    .active-tab {
      background: linear-gradient(180deg, #da9860 0%, #a0897c 100%);
      color: #ffffff;
    }

    img {
      width: 21px;
      height: 21px;
      cursor: pointer;
      position: absolute;
      right: -24px;
      top: 0;
    }

    > div {
      width: 83px;
      height: 22px;
      background: linear-gradient(180deg, #9fc0f3 0%, #709ee3 100%);
      border-radius: 3px 3px 3px 3px;
      font-weight: 400;
      font-size: 12px;
      color: #002b4f;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    > div:not(:first-child) {
      margin: 0px 5px;
    }

    > div:first-child {
      margin-right: 5px;
    }
  }

  .property-developer {
    font-size: 14px;
    color: #fff;
    margin-bottom: 20px;

    .title {
      font-size: 20px;
      margin-bottom: 10px;
    }

    &-content {
      display: flex;
      align-items: flex-start;

      p {
        flex: 1;
      }
    }
  }

  .infor-basic {
    font-size: 14px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .title {
      font-size: 16px;
      color: #ffffff;
      margin-bottom: 13px;
    }
  }
}

.infor-box1 {
  bottom: 20px;
  left: 802px;
  z-index: 1001;
}

.infor-box2 {
  width: 228px;
  height: 235px;
  background: linear-gradient(180deg, rgba(71, 121, 185, 0.85) 0%, rgba(10, 65, 118, 0.6) 100%);
  position: fixed;
  bottom: 20px;
  left: 574px;
  z-index: 1001;
  border-right: 1px dashed #9ec0f2;
  padding: 20px 18px;
}

.infor-transaction {
  font-size: 20px;
  color: #fff;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .charts-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .charts-title-bg {
      padding-left: 23px;
      font-size: 18px;
      color: #e9d484;
      position: relative;
    }

    .charts-title-bg::before {
      content: "";
      width: 23px;
      height: 23px;
      background: #e9d484;
      position: absolute;
      left: 0;
      top: 2px;
      background: url("@/assets/img/gisPage/infor-charts-title.png") no-repeat;
      background-size: 100% 100%;
    }

    .charts-title-tab {
      display: flex;
      align-items: center;

      p {
        font-size: 14px;
        background: url("@/assets/img/gisPage/infor-charts-tab.png") no-repeat;
        background-size: 100% 100%;
        width: 64px;
        height: 23px;
        text-align: center;
        cursor: pointer;
      }

      p:nth-child(2) {
        margin-left: -14px;
      }

      .charts-title-tab-active {
        background: url("@/assets/img/gisPage/infor-charts-tab-active.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }

  .charts-content {
    width: 255px;
    height: 160px;
  }

  .h150 {
    height: 150px;
  }
}

.infor-facilities {
  font-size: 20px;
  color: #fff;

  .department-tab-one {
    display: flex;

    p {
      // width: 44px;
      // height: 27px;
      padding: 2px 8px;
      background: url("@/assets/img/gisPage/department-bg.png") no-repeat;
      background-size: 100% 100%;
      text-align: center;
      font-size: 12px;
      margin-right: 4px;
      cursor: pointer;
      color: #edf2f8;
    }

    .department-tab-one-active {
      background: url("@/assets/img/gisPage/department-bg-active.png") no-repeat;
      background-size: 100% 100%;
      color: #ffffff;
    }
  }

  .department-tab-two {
    font-size: 14px;
    color: #fff;
    display: flex;
    align-items: center;
    margin: 18px 0;

    p {
      padding-left: 24px;
      margin-right: 20px;
      cursor: pointer;
      position: relative;
    }

    p::before {
      content: "";
      position: absolute;
      top: 3px;
      left: 0;
      width: 14px;
      height: 14px;
      background: url("@/assets/img/gisPage/radio-bg.png") no-repeat;
      background-size: 100% 100%;
    }

    .department-tab-two-active::before {
      background: url("@/assets/img/gisPage/radio-bg-active.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}

.department-tab-list {
  overflow: hidden;
  overflow-y: auto;
  height: 130px;
  margin-top: 15px;

  // 设置滚动条样式
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 16px;
    background: #02e3ee;
  }

  &::-webkit-scrollbar-track {
    border-radius: 16px;
    background: #8a8a8a;
  }

  .facilities-item {
    padding: 4px 18px 4px 0;
    cursor: pointer;
    // border-bottom: 1px dashed #67c2d0;

    .facilities-item-top {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .distance {
        font-size: 14px;
      }

      .facilities-item-top-l {
        display: flex;
        align-items: center;

        .name {
          width: 108px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 18px;
        }

        .num {
          width: 17px;
          height: 20px;
          background: url("@/assets/img/gisPage/sort.png") no-repeat;
          background-size: 100% 100%;
          line-height: 18px;
          text-align: center;
          margin-right: 18px;
          font-size: 12px;
          color: #11768e;
        }
      }
    }

    .facilities-item-bottom {
      font-size: 14px;
      margin-left: 12px;
      width: 230px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .facilities-item:nth-last-child(1) {
    border: none;
  }
}

.surrounding-facility-empty {
  height: 360px;

  /deep/ .el-empty__image {
    display: none;
  }

  /deep/ .el-empty__description p {
    color: white;
  }
}

.l-name {
  font-size: 22px;
  color: #ffffff;
  width: 100%;
  text-align: center;
  margin-bottom: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.infor-box2 .basic-item {
  margin-bottom: 10px;
  justify-content: space-between;
}

.jb-infor {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;

  .basic-one {
    p {
      line-height: 24px;
    }
  }
}

.vr-box {
  display: flex;
  justify-content: start;
  margin-top: 30px;
  overflow-x: auto;
  width: 100%;
  flex-wrap: nowrap;
  // 设置滚动条
  &::-webkit-scrollbar {
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 16px;
    background: #02e3ee;
  }

  &::-webkit-scrollbar-track {
    border-radius: 16px;
    background: #8a8a8a;
  }

  .vr-box-img {
    img {
      width: 150px;
      height: 100px;
      margin-right: 10px;
    }

    img:hover {
      cursor: pointer;
    }

    div {
      color: #fff;
      font-size: 18px;
      text-align: center;
      margin-top: 10px;
    }
  }
}

::v-deep .el-form-item__label {
  font-size: 18px;
  color: #fff;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left;
  // background-color: red;
  justify-content: flex-start;
  margin-right: 20px !important;
}

::v-deep .el-input__wrapper {
  background: #1c5e9c;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #75a4eb !important;
  height: 31px;
  box-shadow: none !important;
}

::v-deep .el-select__wrapper {
  height: 31px;
  background: #1c5e9c;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #75a4eb;
  box-shadow: none !important;
  font-size: 18px;
  color: #ffffff;
}

.district ::v-deep .el-select__wrapper {
  width: 100%;
}

::v-deep .el-input-group__append {
  background: #1c5e9c;
  height: 31px;
  border: none;
  color: #29f1fa;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #75a4eb;
  box-shadow: none;
}

.table-sty {
  width: 803px;
  height: 587px;
  background: linear-gradient(180deg, rgba(71, 121, 185, 0.85) 0%, rgba(10, 65, 118, 0.6) 100%);
  border-radius: 0px 0px 0px 0px;
  position: fixed;
  left: 576px;
  bottom: 270px;
  padding: 44px 24px 24px 24px;

  .table-sty-box {
    width: 100%;
    height: 100%;
    overflow: auto;
    // padding-right:10px;
  }

  // 设置滚动条样式
  .table-sty-box::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .table-sty-box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #75a4eb;
  }

  .table-sty-box::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  }

  table {
    width: 100%;
    min-width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(71, 121, 185, 0.85) 0%, rgba(10, 65, 118, 0.6) 100%);
    font-size: 18px;
    color: #ffffff;
    border-collapse: collapse;
    table-layout: fixed;
  }

  table tr {
    height: 68px;

    td {
      border: 1px solid #60b3da;
      text-align: center;
      position: relative;

      .content-infor {
        font-size: 12px;
      }

      .num {
        position: absolute;
        left: 6px;
        top: 4px;
        font-size: 18px;
      }

      .status {
        display: block;
        width: 100%;
        height: 18px;
        background: rgba(218, 96, 96, 0.8);
        border-radius: 0px 0px 0px 0px;
        position: absolute;
        left: 0px;
        bottom: 0px;
        font-size: 12px;
        line-height: 18px;
      }

      .status1 {
        display: block;
        width: 38px;
        height: 18px;
        background: #60b3da;
        border-radius: 0px 0px 0px 0px;
        position: absolute;
        right: 0px;
        top: 0px;
        font-size: 12px;
        line-height: 18px;
        cursor: pointer;
      }
    }
  }
}

.infor-lp-off {
  width: 83px;
  height: 22px;
  background: linear-gradient(180deg, #9fc0f3 0%, #709ee3 100%);
  border-radius: 3px 3px 3px 3px;
  font-weight: 400;
  font-size: 12px;
  color: #002b4f;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 24px;
  top: 10px;
  cursor: pointer;
}
</style>

<style lang="less">
.infor-pg-custom-cascader {
  z-index: 1000000 !important;
  background: #1c5e9c !important;

  li {
    color: white !important;
    background-color: rgba(0, 0, 0, 0) !important;
  }
}

.infor-assess-custom-select-popper {
  z-index: 1000000 !important;
}
</style>
